<template>
  <div class="fans-container">
    <van-sticky>
      <van-nav-bar
        class="bgcolor"
        title="关注列表"
        safe-area-inset-top
        @click-left="$router.go(-1)"
      >
        <template #left>
          <van-icon class="leftIcon" name="arrow-left" />
        </template>
      </van-nav-bar>
    </van-sticky>

    <div class="main-content">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <template #success>
          <i class="iconfont icon-success"></i>
          加载成功
        </template>
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <idol-card v-for="item in idolList" :key="item.id" :idol="item" />
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { selectIdolList } from "@/api/community";
import idolCard from "./components/idolCard.vue";
export default {
  components: { idolCard },
  name: "Fans",

  data() {
    return {
      idolList: [],
      page: 1,
      loading: false,
      finished: false,
      refreshing: false,
    };
  },

  computed: {
    ...mapState("user", ["user"]),
  },

  mounted() {},

  activated() {},

  deactivated() {
    this.refreshing = false;
  },

  methods: {
    onLoad() {
      if (this.refreshing) {
        this.page = 1;

        this.idolList = [];
        this.refreshing = false;
      }

      let params = {
        userId: this.user.id,
        page: this.page,
      };

      selectIdolList(params).then((res) => {
        console.log("idol res = ", res);
        if (res.data.length > 0) {
          this.idolList = [...this.idolList, ...res.data];
        } else if (res.data.length == 0) {
          this.finished = true;
        }
        this.page++;
        this.loading = false;
      });
    },

    onRefresh() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      setTimeout(() => {
        this.onLoad();
      }, 1000);
    },
  },
};
</script>

<style scoped>
.bgcolor {
  background-color: rgb(153, 217, 157);
  color: #000;
}

.leftIcon {
  color: #000 !important;
  font-size: 18px;
}
</style>